<template>
  <div>
    <el-drawer
      title="商品上架"
      :before-close="handleClose"
      :visible.sync="putwayDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="500px"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="commodityInfo"
          :rules="commodityInfoRule"
          ref="commodityInfoRef"
        >
          <el-form-item
            label="所属油站"
            :label-width="formLabelWidth"
            prop="stationId"
          >
            <el-select
              v-model="commodityInfo.stationId"
              placeholder="请选择油站"
              style="width: 300px"
            >
              <el-option
                v-for="(item, index) in stationList"
                :key="index"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="销售价格"
            :label-width="formLabelWidth"
            prop="salePrice"
          >
            <el-input
              v-model="commodityInfo.salePrice"
              autocomplete="off"
              maxlength="11"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="上架数量"
            :label-width="formLabelWidth"
            prop="putawayNum"
          >
            <el-input
              v-model="commodityInfo.putawayNum"
              autocomplete="off"
              maxlength="11"
              style="width: 300px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="loading">
            {{ loading ? "提交中 ..." : "确 定" }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { listEnterpriseStation } from "@/api/nonOil/putlntoStorage";
import { putAwayCommodityApi } from "@/api/nonOil/goods";
export default {
  name: "GoodPutway",
  props: {
    putwayDialog: {
      type: Boolean,
      default: false,
    },
    currentGoodInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    // 销售价格
    let checksalePrice = (rule, value, callback) => {
      let amount = Number(String(value).trim());
      const reg = /^\d+(\.\d{1,2})?$/;
      if (!value) return callback(new Error("请输入金额"));
      if (value <= 0) return callback(new Error("金额不能小于等于0"));
      if (Number.isNaN(amount)) return callback(new Error("请输入合法数字"));
      if (!reg.test(amount)) return callback(new Error("金额最多保留两位小数"));
      callback();
    };
    // 上架数量 ： 整数，大于0
    let checkputawayNum = (rule, value, callback) => {
      let amount = Number(String(value).trim());
      const reg = /^\d+(\.\d{0,0})?$/;
      if (!value) return callback(new Error("请输入数量"));
      if (value <= 0) return callback(new Error("数量不能小于等于0"));
      if (Number.isNaN(amount)) return callback(new Error("请输入合法数字"));
      if (!reg.test(amount)) return callback(new Error("请输入整数"));
      callback();
    };
    return {
      formLabelWidth: "80px",
      //   商品信息
      commodityInfo: {},
      //   校验规则
      commodityInfoRule: {
        stationId: [
          { required: true, message: "请选择油站", trigger: "change" },
        ],
        salePrice: [
          { required: true, validator: checksalePrice, trigger: "blur" },
        ],
        putawayNum: [
          { required: true, validator: checkputawayNum, trigger: "blur" },
        ],
      },
      loading: false,
      stationList: [],
    };
  },
  watch: {
    putwayDialog(val) {
      if (val) {
        console.log("调用油站列表", val);
        this.getStationList();
      }
    },
  },

  methods: {
    // 关闭
    handleClose() {
      this.$emit("update:putwayDialog", false);
      this.resetForm("commodityInfoRef");
    },

    // 确定提交上架
    handleSubmit() {
      this.$refs.commodityInfoRef.validate((valid) => {
        if (valid) {
          const params = { ...this.commodityInfo };
          params.commodityId = this.currentGoodInfo.commodityId;
          putAwayCommodityApi(params).then((res) => {
            this.msgSuccess("上架成功");
            this.handleClose();
            this.$emit("reloadData");
          });
        } else {
          console.log("error submit");
        }
      });
    },

    // 获取油站列表
    getStationList() {
      if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
        listEnterpriseStation({
          enterpriseId: this.presentEnterprise.enterpriseId,
        }).then((res) => {
          this.stationList = res;
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .demo-drawer {
  overflow: auto;
  .el-drawer__header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    font-size: 18px;
  }
  .el-drawer__body {
    padding: 20px;

    .demo-drawer__content {
      .demo-drawer__footer {
        text-align: end;
      }
    }
  }
}
</style>
